<template>
  <div id="channelList">
    <!-- 头部 -->
    <el-card>
      <el-form class="pageQuery" label-position="top">
        <div class="queryItem" v-for="(queryItem, index) in queryItem" :key="index">
          <el-form-item :label="queryItem.label">
            <el-input v-if="queryItem.inputType == 'input'" :placeholder="queryItem.placeholder"
              v-model="queryInfo[queryItem.model]"></el-input>

            <el-select v-if="queryItem.inputType == 'select'" :placeholder="queryItem.placeholder"
              v-model="queryInfo[queryItem.model]">
              <el-option v-for="(item, index) in  option[queryItem.option]" :key="index" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="getListData">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 列表内容 -->
    <el-card class="contenCard">
      <div class="tableHeader">
        <el-button v-if="$api.buttonPower(55)" type="success" @click="add_box.show = true">添加渠道</el-button>
      </div>
      <el-table :data="listData" v-loading="loading">
        <el-table-column v-for="(tableItem, index) in tableItem" :key="index" :label="tableItem.label" :prop="tableItem.prop">
          <template slot-scope="scope">
            <div v-html="$api.status.status(scope.row.status, option[$api.Enum.DicTypeStatus])" v-if="tableItem.prop == 'status'"></div>
            <div v-else>{{ scope.row[tableItem.prop] }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="id" label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <a @click="detailOpen(scope.row.id)" v-if="$api.buttonPower(56)" class="routeButton">查看</a>
          </template>
        </el-table-column>

        <template slot="empty">
          <myEmpty></myEmpty>
        </template>
      </el-table>

      <!-- 分页 -->
      <myPaging :queryInfo="queryInfo" :getListData="getListData"></myPaging>
    </el-card>

    <!-- 添加 -->
    <el-dialog title="新增渠道" :visible.sync="add_box.show" width="50%">
      <iot-channel-set v-if="add_box.show" @close="addClose"></iot-channel-set>
    </el-dialog>
    <!-- 查看数据对话框 -->
    <el-drawer title="渠道详情" :visible.sync="detail_box.show" size="50%" class="block-box">
      <iot-channel-detail :data_id="detail_box.id" v-if="detail_box.show"></iot-channel-detail>
    </el-drawer>
  </div>
</template>

<script>
// 验证规则
import IotChannelDetail from "@/components/iotCard/channel/channelDetail";
import IotChannelSet from "@/components/iotCard/channel/channelSet";
export default {
  components: {IotChannelSet, IotChannelDetail},
  data() {
    return {
      // 请求参数
      queryInfo: {
        page: 1,
        size: 10,
        total: 0
      },
      option: [],
      listData: [], // 列表数据
      detail: {
        options: {}
      },
      setDialogVisible: false,
      queryItem: [
        {
          inputType: 'input',
          model: 'title',
          placeholder: '请输入渠道名称',
          label: '渠道名',
          option: ''
        },
        {
          inputType: 'select',
          model: 'operator_key',
          placeholder: '请选择运营商',
          label: '运营商',
          option: this.$api.Enum.DicTypeOperator
        },
        {
          inputType: 'select',
          model: 'status',
          placeholder: '请选择状态',
          label: '状态',
          option: this.$api.Enum.DicTypeStatus
        },
      ],
      tableItem: [
        {
          label: '编码',
          prop: 'coding'
        },
        {
          label: '渠道名',
          prop: 'title'
        },
        {
          label: '运营商',
          prop: 'operator_key_name'
        },
        {
          label: '状态',
          prop: 'status'
        },
      ],
      dialogTitle: '',
      editFormType: '',
      loading: false,
      add_box:{
        show: false,
      },
      detail_box:{
        show: false,
        id: 0,
      }
    };
  },
  mounted() {
    this.$api.foundation.dicListExtendCache(
        [
          this.$api.Enum.DicTypeOperator,
          this.$api.Enum.DicTypeChannelType,
          this.$api.Enum.DicTypeStatus,
          this.$api.Enum.DicTypeChannelDrive
        ],
        {},
        res => {
          this.option = res;
        }
    );
    this.getListData();
    this.$api.power(this.queryItem, this.tableItem, res => {
      this.queryItem = res.queryItem
      this.tableItem = res.tableItem
    })
  },
  methods: {
    // 获得列表数据
    getListData() {
      this.loading = true
      this.$api.channel.list(this.queryInfo, res => {
        if (!res.status) {
          return this.$message.error(res.message);
        }
        this.listData = res.data.list;
        this.queryInfo.total = res.data.page.total
        this.loading = false
      });
    },
    // 获得详情
    detailOpen(id) {
      this.detail_box.show = true
      this.detail_box.id = id
    },
    handleSizeChange(newSize) {
      this.queryInfo.size = newSize;
      this.getListData();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getListData();
    },
    addClose(level){
      this.add_box.show = false
      if (level == 1){
        return
      }
      this.getListData()
    },
  }
};
</script>
<style lang="less">
#channelList {
  .label {
    width: 100px;
    text-align-last: justify;
    display: inline-block;
    font-weight: bold;
  }
}
</style>  
<style lang="less" scoped>
.detailDialog {
  padding: 0 20px;

  .panel {
    margin-bottom: 20px;
  }
}


</style>